import React, { useEffect } from 'react'
import './index.scss'
import ClipboardJS from 'clipboard'

// component
import { Transition } from 'react-transition-group'
const { lz } = window

const UpgradePopup = ({ status }) => {
  const { content } = {
    title: 'Personalized Decoration',
    content: {
      notice: 'Participate the event to get more decorations',
      noItme: 'No relevant item',
      days: 'xx days',
      forever: 'Permanent',
      dress: 'Use it',
      undress: 'Take off',
      changeSuccess: 'Changed Successfully',
      changeFail: 'Failed to change',
      go: 'GO',
      // upgradeTitle: 'Unlock new function!',
      upgradeBtn: 'Upgrade now',
      upgradeDesc:
        'Your TIYA version is too low to participate in the event, please come again after upgrading.',
      upgradeCopied: 'Copied',
      upgradeTips:"Tips: Copy the link in the browser to update"
    },
  }
  const onelink = 'https://tiya.onelink.me/Q4Ny/35bf6978'
  useEffect(() => {
    const clipboard = new ClipboardJS('#onelink')
    clipboard.on('success', (e) => {
      lz && lz.showPrompt({ type: 0, msg: content.upgradeCopied })
    })
  }, [content.upgradeCopied])
  return (
    <Transition in={status} timeout={500} appear={true} unmountOnExit={true}>
      {(state) => (
        <div id="upgrade-pop" className={state}>
          <div className="wrapper-main">
            <div className="main">
            <div className="holder"></div>
                <div className="tip">
                  <h5 className="tip--title">{content?.upgradeTitle}</h5>
                  <p className="tip--desc">{content?.upgradeDesc}</p>
                  <div className="tip--btn" id="onelink" data-clipboard-text={onelink}>
                    {content?.upgradeBtn}
                  </div>
                  <div className="tip--tips">{content?.upgradeTips}</div>
                </div>
            </div>
          </div>
        </div>
      )}
    </Transition>
  )
}

export default UpgradePopup
